<script setup>
import { ref } from 'vue'
import FieldCard from './components/FieldCard.vue'
import AddFieldCard from './components/AddFieldCard.vue'
import { getField } from '@/api/equipment/fields'
const tabList = ref([
  {
    label: '设备类型',
    name: 'deviceType',
  },
  {
    label: '设备状态',
    name: 'deviceStatus',
  },
  {
    label: '使用状态',
    name: 'useStatus',
  },
  {
    label: '入库类型',
    name: 'inboundType',
  },
  {
    label: '出库类型',
    name: 'outboundType',
  },
])
const activeName = ref('deviceType')
const fieldList = ref([])
const freshFieldList = async () => {
  await getField().then(res => {
    console.log(res.data)
    fieldList.value = res.data.data
  })
}
freshFieldList()
function fieldListByType(type) {
  return fieldList.value.filter(Ofield => Ofield.type === type)
}
</script>

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane v-for="(item, index) in tabList" :key="index + 1" :label="item.label" :name="item.name">
      <el-row class="cards">
        <field-card v-for="(field, index) in fieldListByType(item.name)" :key="index" :field="field"
          @refeshFieldList="freshFieldList">
          {{ field.name }} </field-card>
        <add-field-card :type="item.name" @refeshFieldList="freshFieldList"></add-field-card>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="less">
.el-tab-pane {
  padding: 30px 30px;
}

.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
</style>